<template>
  <div class="app-container">
    <avue-crud
      :option="option"
      :data="data"
      :table-loading="loading"
      :page.sync="page"
      @on-load="onLoad"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @current-change="currentChange"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="resetChange"
    >
      <template
        slot="icon"
        slot-scope="scope"
      >
        <div v-if="scope.row.icon">
          <svg-icon :icon-class="scope.row.icon"></svg-icon>
        </div>
      </template>
      <template
        slot-scope="{type,size}"
        slot="menu"
      >
        <el-button
          icon="el-icon-thumb"
          :size="size"
          :type="type"
          @click="applyBox=true;"
        >创建申请</el-button>
      </template>
    </avue-crud>

    <!-- 申请表单 -->
    <el-dialog
      title="融资申请"
      :visible.sync="applyBox"
      width="55%"
    >
      <avue-form
        :option="applyForm"
        v-model="form"
        @submit="handleSubmit"
      >
      </avue-form>
    </el-dialog>
  </div>
</template>

<script>
import { addOrder, getOrder } from '@/api/manager.js'
export default {
  data() {
    return {
      loading: false,
      /* 分页 */
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      data: [],
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        labelWidth: 135,
        viewBtn: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        searchMenuSpan: 4,
        searchSpan: 8,
        searchLabelWidth: '20%',
        column: [
          {
            label: '企业名称',
            prop: 'companyName',
            display: false,
            search: true,
          },
          {
            label: '社会统一信用代码',
            prop: 'companyCode',
            display: false,
            search: true,
          },
          {
            label: '企业类型',
            prop: 'companyType',
            display: false,
            search: true,
            type: 'select',
            dicData: [
              {
                label: '小微企业',
                value: '1',
              },
              {
                label: '中型企业',
                value: '2',
              },
              {
                label: '大型企业',
                value: '3',
              },
              {
                label: '超大型企业',
                value: '4',
              },
              {
                label: '个体工商户',
                value: '5',
              },
            ],
          },
          {
            label: '法人姓名',
            prop: 'name',
            display: false,
          },
          {
            label: '是否符合授信规则',
            prop: 'accordCredit',
            display: false,
          },
          {
            label: '客户经理',
            prop: 'registerCapital',
            display: false,
          },
        ],
        group: [
          {
            icon: 'el-icon-info',
            label: '基础信息',
            collapse: true,
            column: [
              {
                label: '姓名',
                prop: 'name',
              },
              {
                label: '年龄',
                prop: 'age',
              },
              {
                label: '客户类型',
                prop: 'customerType',
              },
              {
                label: '籍贯',
                prop: 'nativePlace',
              },
              {
                label: '学历',
                prop: 'education',
              },
              {
                label: '性别',
                prop: 'sex',
                type: 'select',
                dicData: [
                  {
                    label: '男',
                    value: '1',
                  },
                  {
                    label: '女',
                    value: '0',
                  },
                ],
              },
              {
                label: '婚姻状况',
                prop: 'maritalstatus',
                type: 'select',
                dicData: [
                  {
                    label: '已婚',
                    value: '1',
                  },
                  {
                    label: '未婚',
                    value: '0',
                  },
                ],
              },
              {
                label: '身份证',
                prop: 'idCard',
              },
              {
                label: '手机号',
                prop: 'phone',
              },
              {
                label: '邮箱',
                prop: 'email',
              },
              {
                label: '联系地址',
                prop: 'contactAdress',
              },
              {
                label: '紧急联系人',
                prop: 'urgentName',
              },
              {
                label: '紧急联系人电话',
                prop: 'urgentPhone',
              },
              {
                label: '与本人的关系',
                prop: 'urgentRelation',
              },
            ],
          },
          {
            icon: 'el-icon-info',
            label: '法人信息',
            collapse: true,
            column: [
              {
                label: '企业名称',
                prop: 'companyName',
              },
              {
                label: '社会统一信用代码',
                prop: 'companyCode',
              },
              {
                label: '注册时间',
                prop: 'registerTime',
              },
              {
                label: '注册资金',
                prop: 'registerCapital',
              },
              {
                label: '所属行业',
                prop: 'companyType',
                type: 'select',
                dicData: [
                  {
                    label: '请选择',
                    value: '',
                  },
                  {
                    label: '农林牧渔业',
                    value: '0',
                  },
                  {
                    label: '教育',
                    value: '1',
                  },
                  {
                    label: '采矿业',
                    value: '2',
                  },
                ],
              },
              {
                label: '企业地址',
                prop: 'companyAddress',
              },
            ],
          },
        ],
      },

      /* 申请表单系列 */
      applyBox: false,
      applyForm: {
        group: [
          {
            icon: 'el-icon-info',
            label: '企业信息',
            arrow: false,
            prop: 'group1',
            column: [
              {
                label: '企业名称',
                prop: 'companyName',
              },
              {
                label: '社会信用代码',
                prop: 'companyCode',
              },
              {
                label: '注册时间',
                prop: 'registerTime',
              },
            ],
          },
          {
            icon: 'el-icon-info',
            label: '法人信息',
            arrow: false,
            prop: 'group2',
            column: [
              {
                label: '选项卡2',
                prop: 'text2',
              },
              {
                label: '选项卡3',
                prop: 'text3',
              },
            ],
          },
        ],
      },
      form: {},
    }
  },
  methods: {
    onLoad(page, params = {}) {
      if (page.layout) {
        Object.assign(params, {
          page: 1,
          size: 10,
        })
      } else {
        Object.assign(params, page)
      }
      this.loading = true
      getOrder(params).then((data) => {
        this.loading = false
        this.data = data.data.records
        this.page.total = data.data.total
      })
    },
    /* 清空 */
    resetChange() {
      this.onLoad({
        currentPage: 1,
        pageSize: 10,
      })
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done()
      params.currentPage = 1
      params.pageSize = 10
      this.onLoad(params)
    },
    /* 新增 */
    rowSave(row, done, loading) {
      addOrder(row).then(
        (data) => {
          done()
          this.onLoad(this.page)
          console.log(data)
          // this.$message({
          //     type: "success",
          //     message: "操作成功!"
          // });
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    /* 修改 */
    rowUpdate(row, index, done, loading) {
      delete row.createTime
      delete row.updateTime
      upOrder(row).then(
        () => {
          done()
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    /* 表单提交 */
    handleSubmit() {},
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
</style>
